/**
 *  学习目标：PureComponent 纯组件和原理揭秘：
 *    PureComponent 源码比较了 props 和 state 的新值和旧值。
 *    如果没有改变，返回 false 以告知 React 可以跳过更新。
 */
import React from 'react'

export default class App extends React.Component {
  state = {
    number: 0,
  }
  render() {
    return (
      <>
        <h1>知识点标题</h1>
        <button onClick={() => this.setState({ number: Math.random() })}>点击改变number</button>
        <h2>number:{this.state.number}</h2>
        {/* 组件更新机制：父组件重新渲染时，也会重新渲染子组件。*/}
        <Footer aa={1} />
        <FooterPure aa={1} />
      </>
    )
  }
}

class Footer extends React.Component {
  // PureComponent 底层源码揭秘：比较了 props 和 state 的新值和旧值，如果没有改变，返回 false 以告知 React 可以跳过更新。
  shouldComponentUpdate(nextProps, nextState) {
    // 伪代码 比较 nextProps 是否等于 现在的 props，如果相等，不运行 render
    // 如果你一定要手动编写此函数，可以将 this.props 与 nextProps 以及 this.state 与nextState 进行比较，并返回 false 以告知 React 可以跳过更新。
    if (this.props.aa === nextProps.aa) {
      // 返回 false 以告知 React 可以跳过更新。
      return false
    } else {
      // 返回 true，遵循默认行为。大部分情况下，你应该遵循默认行为。
      return true
    }
  }

  render() {
    console.log('子组件Footer的render被运行了')
    return (
      <div>
        <h3>小米网站底部-不用变的静态结构</h3>
      </div>
    )
  }
}

// 继承于纯组件(性能优化：静态展示的组件，可跳过更新)
class FooterPure extends React.PureComponent {
  render() {
    console.log('子组件Footer的render被运行了')
    return (
      <div>
        <h3>小米网站底部-不用变的静态结构</h3>
      </div>
    )
  }
}
